@use 'sass:map';

@use './_option.scss' as option;
@use './_mixin.scss' as *;

/*  #ifndef  APP-NVUE  */
page {
	-webkit-overflow-scrolling: touch; /*ios滑动不流畅*/
	background: #f6f7fb;
	font-size: 28rpx;
	color: map.get(option.$appColors, 'black');
	box-sizing: border-box;
}

.keep-all {
	word-break: keep-all !important; //英文文本整词换行
}
.uni-modal__bd {
	word-break: keep-all !important; //英文文本整词换行
}
uni-toast {
	z-index: 19999;
}
uni-toast .uni-simple-toast__text {
	word-break: keep-all !important; //英文文本整词换行
}

input {
	font-size: 28rpx;
}
/*  #ifdef  H5  */
image {
	vertical-align: top;
}
img {
	vertical-align: top;
}
/*  #endif  */
image {
	will-change: transform;
}
button::after {
	border: none;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator {
	box-sizing: border-box;
}
textarea {
	width: auto !important;
}
radio {
	transform: scale(0.8);
}

view {
	word-break: break-word; //英文文本以单词换行
	white-space: pre-wrap; //中文换行
}

// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
.app-mp-contact-btn {
	padding: 0;
	margin: 0;
	background-color: transparent;
	/* #ifndef APP-PLUS */
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	/* #endif */
	/* #ifdef APP-NVUE */
	border-width: 0;
	/* #endif */
}

/*  #endif  */

/* 字体与背景颜色 */

.c-35 {
	color: #353535;
}
.c-34 {
	color: #343434;
}
.c-333 {
	color: #333333;
}
.c-666 {
	color: #666;
}
/*  #ifndef  APP-NVUE  */
.c-primary {
	color: var(--color-primary);
}
.bg-primary {
	background-color: var(--color-primary) !important;
}
.bg-gradient-primary{
	background: var(--gradient-primary) !important;
}
/*  #endif  */
.bg-f6f7fb{
	background-color: #f6f7fb;
}
.bg-f7 {
	background: #f7f7f7;
}
$colorTypes: 'white', 'black', 'red', 'blue', 'info', warning, regular, secondary, placeholder;
@mixin set-color-and-bg($type) {
	.c-#{$type} {
		color: map.get(option.$appColors, $type);
	}
	.bg-#{$type} {
		background-color: map.get(option.$appColors, $type);
	}
}
@each $type in $colorTypes {
	@include set-color-and-bg($type);
}

.fw-500 {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

/* 禁用的表单组件样式 */
.is-ok {
	opacity: 0.5;
}
/* 定位 */
.e-rela {
	position: relative !important;
}
.e-abso {
	position: absolute !important;
}
.absolute-full {
	@include absolute-full;
}
.overflow-hidd {
	overflow: hidden;
}
.fixed-top {
	@include fixed-top;
}
.fixed-bottom {
	@include fixed-bottom;
}

.ios-btm {
	/* #ifndef APP-PLUS */
	height: constant(safe-area-inset-bottom);
	/* 兼容 iOS < 11.2 */
	height: env(safe-area-inset-bottom);
	/* 兼容 iOS >= 11.2 */
	/* #endif */
}

/*  #ifndef  APP-NVUE  */

// 自营标签
.self-icon {
	padding: 4rpx 8rpx;
	border-radius: 6rpx;
	background: var(--gradient-primary);
	text-align: center;
	font-size: 22rpx;
	color: #fff;
}

.arrow-icon {
	position: relative;
	width: var(--arrow-width, 18rpx);
	height: var(--arrow-width, 18rpx);
	&::before {
		content: '';
		position: absolute;
		top: calc(0 - var(--arrow-width, 18rpx) / 2);
		width: var(--arrow-width, 18rpx);
		height: var(--arrow-width, 18rpx);
		border: solid var(--arrow-border-width, 2rpx) var(--arrow-color, #fff);
	}
	&--left {
		&::before {
			left: 0;
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}
	}
	&--right {
		&::before {
			right: 0;
			border-bottom: none;
			border-left: none;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
}
.uni-modal__bd {
	word-break: keep-all !important; //英文文本整词换行
}
.keep-all {
	word-break: keep-all !important;
}
.white-nowrap {
	white-space: nowrap; //禁止换行
}
.text-scribe {
	text-decoration-line: line-through;
}
/*  #endif  */

.border-white-bottom {
	border-bottom: 1px solid #dfdfdf;
}
// 通用的元素按下时的样式
.app-hover-class {
	opacity: 0.7;
}

// 块高度自动保持与宽度一致，用于某些场景下容器显示比例是1：1的情况，如在flex布局种，则需单独为这个类的块设置一个宽度
.square-auto-height {
	position: relative;
	height: 0;
	padding-bottom: 100%;
}
.ql-editor{
	padding:0 !important
}
.ql-container{
	font-size:28rpx;
}